<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>舱室患者列表</title>
    <link rel="stylesheet" type="text/css" href="../css/api.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
    <link rel="stylesheet" type="text/css" href="../css/aui.2.0.css" />
    <style>
        [v-cloak] {
            display: none;
        }

        html,
        body {
            background-color: transparent;
        }

        .expend-cabin-wrapper>span {
            display: inline-block;
            font-size: 14px;
        }

        .aui-btn-info.add-cabin-info-btn {
            position: fixed;
            right: 10px;
            bottom: 100px;
        }

        .cabin-info {
            position: fixed;
            top: 0px;
            left: 0;
            z-index: 100;
            height: 100vh;
            width: 100%;
            background-color: rgba(255, 255, 255, 1);
            overflow: auto;
        }

        .add-cabin-info {
            width: 100%;
        }

        .aui-card-list {
            margin-top: 28px;
            background-color: transparent;
            margin-bottom: 0 !important;
        }

        .aui-btn-sm {
            width: 300px;
            margin: 20px auto;
        }

        .aui-list-item.aui-list-item-middle {
            width: 95%;
            margin: 0 auto;
            border-radius: 10px;
            -moz-box-shadow: 1px 4px 20px #C2C2C2;
            -webkit-box-shadow: 1px 4px 20px #C2C2C2;
            box-shadow: 1px 4px 20px #C2C2C2;
        }

        .aui-list-item-text {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            align-items: center;
        }

        .aui-list-item-text>span {
            flex: 1;
        }

        .patient-container {
            display: -webkit-flex;
            display: flex;
            justify-content: space-between;
            align-items: center;
            flex-wrap: wrap;
            padding: 0 15px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            height: 600px;
            overflow-y: auto;
            padding-bottom: 10px;
        }

        .patient-wrapper {
            background-color: #fff;
            padding: 10px;
            border-radius: 10px;
            -moz-box-shadow: 1px 4px 20px #C2C2C2;
            -webkit-box-shadow: 1px 4px 20px #C2C2C2;
            box-shadow: 1px 4px 20px #C2C2C2;
            width: 49%;
            margin-top: 27px;
        }

        .patient-wrapper>div {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            align-items: center;
            width: 100%;
        }

        .patient-wrapper>div>span:nth-child(1) {
            width: 55%;
            text-align: center;
        }

        .patient-wrapper>div>span:nth-child(1)>img {
            width: 30px;
            height: 30px;
        }

        .patient-wrapper>div>span:nth-child(3)>img {
            width: 30px;
            height: 30px;
        }

        .patient-wrapper>div>span:nth-child(2) {
            width: 45%;
            text-align: left;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }

        .patient-wrapper>div.patient-ex-container>span {
            width: 100%;
            text-align: center;
        }

        .aui-tab {
            display: flex;
            display: -webkit-flex;
            flex-direction: column;
            float: left;
        }

        .aui-tab>div {
            width: 100px;
            height: 50px;
        }

        .aui-tab::after {
            display: none;
        }

        .aui-padded-5 {
            float: left;
        }

        .tab-container {
            display: -webkit-flex;
            display: flex;
            justify-content: flex-start;
            width: 94%;
            margin: 0 auto;
        }

        .tab-container>div:nth-child(1) {
            width: 25%;
        }

        .tab-container>div:nth-child(1)>div {
            width: 100%;
            text-align: center;
        }

        .tab-container>div:nth-child(2) {
            width: 75%;
            background-color: #fff;
            text-align: left;
        }

        #tab {
            border-radius: 10px;
        }

        .aui-list.aui-media-list::after,
        .aui-list.aui-media-list::before {
            display: none !important;
        }

        .patient-list-fix-bottom {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #fff;
        }

        .patient-list-fix-bottom>div {
            display: -webkit-flex;
            display: flex;
            justify-content: space-around;
            align-items: center;
            height: 72px;
            line-height: 72px;
        }

        .patient-list-fix-bottom>div>div {
            width: 25%;
            text-align: center;
            height: 72px;
            line-height: 72px;
        }

        .patient-list-fix-bottom>div>div>span {
            float: left;
            height: 72px;
            line-height: 72px;
            display: inline-block;
        }

        .patient-list-fix-bottom>div>div>span:nth-child(1) {
            width: 35%;
        }

        .patient-list-fix-bottom>div>div>span:nth-child(2) {
            width: 65%;
        }

        .patient-list-fix-bottom>div>div>span>i {
            display: inline-block;
            width: 20px;
            height: 15px;
            margin-left: 15px;
        }

        .patient-list-fix-bottom>div:nth-child(2)>div:nth-child(1)>span>i {
            background-color: #d81e06;
        }

        .patient-list-fix-bottom>div:nth-child(2)>div:nth-child(2)>span>i {
            background-color: #1296db;
        }

        .patient-wrapper>div:nth-child(1)>span:nth-child(1) {
            width: 30%;
        }

        .patient-wrapper>div:nth-child(1)>span:nth-child(2) {
            width: 50%;
        }

        .patient-wrapper>div:nth-child(1)>span:nth-child(3) {
            width: 20%;
        }

        .patient-wrapper>div:not(:first-child)>span {
            color: #666;
            font-size: 17px;
        }
        /* ------------------------------------------------------------- */

        .aui-list-item-title,
        .aui-list-item-text>span,
        .aui-font-size-14,
        .patient-list-fix-bottom>div>div>span {
            color: #fff !important;
        }

        .patient-list-fix-bottom>div>div>span:nth-child(1)>img {
            width: 30px;
            height: 30px;
            vertical-align: middle;
            margin-left: 20px;
        }
        .aui-searchbar-input{
            height: 10px;
        }

        .patient-list-fix-bottom>div>div:nth-child(2)>span:nth-child(1)>img {
            width: 35px;
            height: 35px;
            vertical-align: middle;
            margin-left: 20px;
        }

        .cabin-info {
            position: fixed;
            /*top: 10px;*/
            left: 0;
            z-index: 1000;
            height: 150vh;
            width: 100%;
            background-color: rgba(255, 255, 255, 1);
            /*padding-top: 10px;*/
            overflow: auto;
        }

        .circle {
            border-radius: 50%;
            width: 30px;
            height: 30px;
            color: #fff;
        }
    </style>
</head>

<body>
    <main id="app">
        <div class="aui-card-list">
            <div class="aui-card-list-content">
                <ul class="aui-list aui-media-list">
                    <li @click.prevent.stop="enterMissionPatient" class="aui-list-item aui-list-item-middle" style="margin-top: 10px;background: #84c1ff;">
                        <div class="aui-media-list-item-inner">
                            <div class="aui-list-item-media">
                                <img src="../image/avatar1.jpg" class="aui-img-round aui-list-img-sm">
                                <div class="aui-badge" id="CabinTimes_countSR"></div>
                            </div>
                            <div class="aui-list-item-inner">
                                <div class="aui-list-item-text">
                                    <span id="CabinTimes_Name">舱次名称：</span>
                                    <span id="CabinTimes_yali">治疗压力：</span>

                                </div>
                                <div class="aui-list-item-text">
                                    <span id="CabinTimes_jiayaTime">升压时间：</span>
                                    <span id="CabinTimes_wenyaTime">稳压时间：</span>
                                </div>
                                <div class="aui-list-item-text">
                                    <span id="CabinTimes_jianyaTime">减压时间：</span>
                                    <span id="CabinTimes_chucangTime">出仓时间：</span>
                                </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <div class="patient-container">
            <template v-for="(itme, index) in CabinInformation">
            <div class="patient-wrapper" @click.prevent.stop="enterPatientOptions(itme.F_reserveid,itme.F_id,itme.F_HatchID)" v-if="itme.F_reserveid">
              <div>
                  <span><div class="circle" style="background-color:red">{{index + 1}}</div></span>
                  <!-- <span v-html="getIcon(itme, index)"></span> -->
                  <span>{{itme.F_paientname}}</span>
                  <span v-html="Icon(itme.F_LocationType)"></span>
              </div>
              <!-- <div class="patient-ex-container" style="text-align: left !important;padding-right: 15px;">
                  <span style="color:#84c1ff; !important">{{itme.F_LocationName}}</span>
              </div> -->
              <div>
                <p>{{itme.F_zhuyuannumber}}</p>
              </div>
              <div>
                  <span>性别：{{itme.F_patientsex}}</span>
                  <span>年龄：{{itme.F_patientage}}</span>
              </div>
              <!-- <div>
                  <span>患者来源:{{itme.F_patientsourse}}</span>
                  <span>管道:{{itme.F_guandao}}</span>
              </div> -->
              <div>
                  <span>诊断:{{itme.F_zhenduan}}</span>
                  <span>患者体位:{{itme.F_tiwei}}</span>
              </div>
              <div>
                  <span>吸氧:{{itme.F_xiyang}}</span>
                  <span v-if="itme.F_jianhu==='有'">监护:<span style="color:red">{{itme.F_jianhu}}</span></span>
                  <span v-else>监护:{{itme.F_jianhu}}</span>
              </div>
              <!-- <div class="patient-ex-container">
                  <span>一氧化碳中毒</span>
              </div> -->
              <div class="patient-ex-container" style="text-align: left !important;padding-right: 15px;">
                  <span style="color:red;" v-if="itme.SYCS = 1">剩余{{itme.SYCS}}次</span>
                  <span v-else>剩余{{itme.SYCS}}次</span>
                  <span style="color:red;">已治疗{{itme.F_zhiliaonumber}}次</span>
              </div>
            </div>


            <div class="patient-wrapper"  v-if="!itme.F_reserveid" @click="DisplayPersonnelInformation(itme.F_id)">
              <div>
                <span><div class="circle" style="background-color:#84c1ff">{{index + 1}}</div></span>
                  <!-- <span v-html="getIcon(itme, index)"></span> -->
                  <span></span>
                  <span v-html="Icon(itme.F_LocationType)"></span>
              </div>
              <div class="patient-ex-container" style="text-align: left !important;padding-right: 15px;">
                  <span style="color:#84c1ff; !important">{{itme.F_LocationName}}</span>
              </div>
              <div>
                    <span><strong><i style=" font-size:2.0rem;" class="aui-iconfont aui-icon-plus"></i></strong></span>
              </div>
              <div>
                  <span>&nbsp;</span>
                  <span>&nbsp;</span>
              </div>
            </div>
          </template>
        </div>
        <section class="patient-list-fix-bottom" style="background: #0064B0;" @touchmove.prevent>
            <div>
                <div>
                    <span><img src="../image/ren.png"></span>
                    <span id="RenShuCount">人数：</span>
                </div>
                <div>
                    <span><img src="../image/zuowei.png"></span>
                    <span id="ZuoWeiCount">坐位</span>
                </div>
                <div>
                    <span><img src="../image/chuang.png"></span>
                    <span id="WoWeiCount">卧位：</span>
                </div>
            </div>
            <div>
                <div>
                    <span><i></i></span>
                    <span>空位</span>
                </div>
                <div>
                    <span><i></i></span>
                    <span>站位</span>
                </div>
                <div>
                    <span><img src="../image/sex_man.png"></span>
                    <span id="NanCount">男：</span>
                </div>
                <div>
                    <span><img src="../image/sex_woman.png"></span>
                    <span id="NvCount">女：</span>
                </div>
            </div>
        </section>





        <div class="cabin-info" id="cabin-info" v-if="AddPersonnel">
            <div class="aui-content aui-margin-b-15">
                <section class="hospital">
                    <!-- 搜索 -->

                    <div class="top-search clearfix">
                        <!-- 输入框 -->
                        <div class="aui-searchbar-input aui-border-radius">
                            <i class="aui-iconfont aui-icon-search"></i>
                            <input type="search" placeholder="请输入搜索内容" id="aiName">
                        </div>
                        <!-- 按钮 -->
                        <div class="aui-pull-right aui-btn" tapmode onclick="Query_registration()">
                            <span class="aui-iconfont aui-icon-search"></span>
                        </div>
                    </div>
                </section>
                <ul class="aui-list aui-form-list">
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">住院号</span>
                            </div>
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">姓名</span>
                            </div>
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">体位</span>
                            </div>
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">吸氧</span>
                            </div>
                            <!-- <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">管道</span>
                            </div> -->
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">所在舱次</span>
                            </div>
                            <div class="aui-list-item-label">
                                <span style="color: #23b7e5;">操作</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <ul class="aui-list aui-form-list" v-for="(itme, index) in AddingPatientInformation">
                    <li class="aui-list-item aui-list-item-form">
                        <div class="aui-list-item-inner">
                            <div class="aui-list-item-label">
                                {{itme.F_zhuyuannumber}}
                            </div>
                            <div class="aui-list-item-label">
                                {{itme.F_paientname}}
                            </div>
                            <div class="aui-list-item-label">
                                {{itme.F_tiwei}}
                            </div>
                            <div class="aui-list-item-label">
                                {{itme.F_xiyang}}
                            </div>
                            <!-- <div class="aui-list-item-label">
                                {{itme.F_guandao}}
                            </div> -->
                            <div class="aui-list-item-label">
                                {{itme.LocationName}}
                            </div>
                            <div class="aui-list-item-label" v-if="itme.F_status != '完成医嘱'">
                                <span style="color: #FF0000;">未开医嘱</span>
                            </div>
                            <div class="aui-list-item-label" v-else-if="!(itme.LocationName)">
                                <span style="color: #0000FF;" @click="AddingcabinCrew(itme.F_id)">待排舱</span>
                            </div>
                            <div class="aui-list-item-label" v-else>
                                <span style="color: #FF0000;">已排舱</span>
                            </div>
                        </div>
                    </li>
                </ul>
                <p class="add-cabin-info">
                    <div class="aui-bar aui-bar-btn aui-bar-btn-round aui-btn-sm" style="width:45%;">
                        <div class="aui-bar-btn-item aui-active" onclick="Cancel()">取消</div>
                        <div class="aui-bar-btn-item" onclick="Query_registration()">查询</div>
                    </div>
                </p>
                <div style="height:450px"></div>
            </div>
        </div>
    </main>
</body>

</html>

<script src="../script/api.js" charset="utf-8"></script>
<script src="../script/vue.js" charset="utf-8"></script>
<script src="../js/ToConfigure.js" charset="utf-8"></script>
<script src="../script/aui-toast.js" charset="utf-8"></script>
<script src="../script/aui-dialog.js" charset="utf-8"></script>
<script type="text/javascript">
    var vm = null;
    apiready = function() {
        api.addEventListener({
            name: 'scrolltobottom'
        }, function(ret, err) {
            if (ret.value.state == 'no') {
                reloadPatient();
            }
        });
        vm = new Vue({
            el: '#app',
            data: {
                AddPersonnel: false, //隐藏信息
                CabinInformation: [], //舱内人员信息
                AddingPatientInformation: [], //需要添加的人员信息
                ID: 0, //舱次Id
                LocationI: 0, //位置ID
                Url_IP: ""
            },
            created() {
                //获取所属医院IP地址
                this.Url_IP = ToConfigure_IP("Gorgeous");


                //获取舱次Id 通过舱次Id获取舱次人员
                this.ID = api.pageParam.F_id;
                if (this.ID > 0) {
                    //查询舱次人员信息以及座位
                    this.Query_HO_HatchLocation();
                    //调用查询舱次信息
                    this.Query_HO_CabinInformation();
                }
            },
            methods: {
                getIcon: function(item, index) {
                    if (item.F_reserveid !== null && item.F_reserveid !== '') {
                        return '<img src="../image/' + (index + 1) + '_' + 3 + '.png">'
                    } else {
                        return '<img src="../image/' + (index + 1) + '_' + 2 + '.png">'
                    }
                },
                Icon: function(type) {
                    if (type == "座位") {
                        return '<img src="../image/zuowei.png">'
                    } else if (type == "卧位") {
                        return '<img src="../image/chuang.png">'
                    } else if (type == "担架") {
                        return '<img src="../image/chuang.png">'
                    } else if (type == "抱位") {
                        return '<img src="../image/chuang.png">'
                    }
                },
                //查询舱次人员以及座位
                Query_HO_HatchLocation: function() {
                    //获取舱次ID
                    var ID = api.pageParam.F_id;
                    //判断舱次Id不等于空
                    if (ID > 0 && ID != undefined) {
                        api.ajax({
                            url: this.Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_HO_HatchLocation',
                            data: {
                                values: {
                                    ID: ID
                                }
                            },
                            method: 'get',
                        }, function(ret, err) {
                            if (ret) {
                                vm.CabinInformation = ret;
                                if (ret != "" && ret != null) {
                                    //舱次人数
                                    document.getElementById("RenShuCount").innerText = "人数：" + ret[0].RenShuCount;
                                    //舱次座位人数
                                    document.getElementById("ZuoWeiCount").innerText = "坐位：" + ret[0].ZuoWeiCount;
                                    //舱次卧位人数
                                    document.getElementById("WoWeiCount").innerText = "卧位：" + ret[0].WoDanBaoCount;
                                    //舱次男人数
                                    document.getElementById("NanCount").innerText = "男：" + ret[0].NanCount;
                                    //舱次女人数
                                    document.getElementById("NvCount").innerText = "女：" + ret[0].NvCount;
                                }
                            } else {
                                alert(JSON.stringify(err));
                            }
                        });
                    }
                },
                //查询舱次信息
                Query_HO_CabinInformation: function() {
                    //查询的条件组合
                    var JsParms = new Object();
                    JsParms.F_id = api.pageParam.F_id;
                    //转成json
                    var JsonStr = JSON.stringify(JsParms);
                    console.log(JsonStr);
                    api.ajax({
                        url: this.Url_IP + 'HyperbaricOxygen/CabinTreatment/Query_HO_CabinInformation',
                        method: 'post',
                        data: {
                            values: {
                                parms: JsonStr
                            }
                        },
                    }, function(ret, err) {
                        if (ret) {
                            //舱次人员数量
                            document.getElementById("CabinTimes_countSR").innerText = ret[0].countSR;
                            //舱次名称
                            document.getElementById("CabinTimes_Name").innerText = "舱次名称：" + ret[0].F_Cabin_IDName;
                            //治疗压力
                            document.getElementById("CabinTimes_yali").innerText = "治疗压力:     " + ret[0].F_yali;
                            //升压时间
                            document.getElementById("CabinTimes_jiayaTime").innerText = "升压时间：" + ret[0].F_jiayaTime;
                            //稳压时间
                            document.getElementById("CabinTimes_wenyaTime").innerText = "稳压时间：" + ret[0].F_wenyaTime;
                            //减压时间
                            document.getElementById("CabinTimes_jianyaTime").innerText = "减压时间：" + ret[0].F_jianyaTime;
                            //出仓时间
                            document.getElementById("CabinTimes_chucangTime").innerText = "出仓时间：" + ret[0].F_chucangTime;

                        } else {
                            alert(JSON.stringify(err));
                        }
                    });
                },
                //舱次添加人员信息
                DisplayPersonnelInformation: function(LocationI) {
                    this.LocationI = LocationI;
                    if (this.LocationI)
                    //获取添加人员信息
                        api.ajax({
                        url: this.Url_IP + 'CabinTreatment/AddingPatientInformation',
                        method: 'post',
                    }, function(ret, err) {
                        vm.AddingPatientInformation = ret;
                        vm.AddPersonnel = true
                    });
                },
                //选中人员进行绑定位置     (F_id   患者id)
                AddingcabinCrew: function(F_id) {

                    //获取舱次Id 通过舱次Id获取舱次人员
                    if (F_id != "" && F_id != undefined && this.LocationI > 0 && this.LocationI != undefined) {

                        //获取添加人员信息
                        api.ajax({
                            url: this.Url_IP + 'HyperbaricOxygen/CabinTreatment/Add_Registation_HatchLocation',
                            method: 'post',
                            dataType: 'String',
                            data: {
                                values: {
                                    F_id: F_id,
                                    CCWZID: this.LocationI
                                }
                            }
                        }, function(ret, err) {
                            var toast = new auiToast();
                            vm.AddPersonnel = false; //隐藏信息
                            if (ret == "True") {
                                //查询舱次信息
                                vm.Query_HO_HatchLocation(vm.ID);
                                toast.success({
                                    title: "提交成功",
                                    duration: 2000
                                });
                            } else {
                                toast.fail({
                                    title: "提交失败",
                                    duration: 2000
                                });
                            }
                        });
                    }

                },
                // 患者信息调整
                enterPatientOptions: function(F_reserveid, F_id, F_HatchID) {
                    api.openWin({
                        name: 'patient-options-header',
                        url: './patient-options-header.html',
                        pageParam: {
                            F_reserveid: F_reserveid, //患者ID
                            CCWZID: F_id, //位置
                            F_HatchID: F_HatchID //舱次ID
                        }
                    });
                },
                enterMissionPatient: function() {
                    api.openWin({
                        name: 'missionPatient',
                        url: './missionPatient.html',
                        pageParam: {
                            F_HatchID: api.pageParam.F_id
                        }
                    });
                }
            }
        })
    }

    //查询患者人员
    function Query_registration() {
        //获取所属医院IP地址
        var Url_IP = ToConfigure_IP("Gorgeous");
        //姓名
        parms = document.getElementById("aiName").value;
        //获取添加人员信息
        api.ajax({
            url: Url_IP + '/HyperbaricOxygen/CabinTreatment/Query_registration',
            method: 'get',
            data: {
                values: {
                    parms: parms
                }
            }
        }, function(ret, err) {
            if (ret) {
                vm.AddingPatientInformation = ret;
            } else {

            }
        });
    }



    function reloadPatient() {
        window.location.reload();
    }

    function closewin() {
        api.closeWin({
            name: 'patient'
        });
    }


    function cc(){
    }
    //取消按钮
    function Cancel() {
        vm.AddPersonnel = false;
    }
</script>
